<script lang="ts">
    import "../app.css";
    import Header from "../../components/Header/Header.svelte";
    import { HeaderType } from "../../components/Header/type";

    import LeftTop from "./LeftTop/LeftTop.svelte";
    import LeftBottom from "./LeftBottom/LeftBottom.svelte";
    import RightTop from "./RightTop/RightTop.svelte";
    import RightMiddle from "./RightMiddle/RightMiddle.svelte";
    import RightBottom from "./RightBottom/RightBottom.svelte";
    import LeftMiddle from "./LeftMiddle/LeftMiddle.svelte";
    import CenterTop from "./CenterTop/CenterTop.svelte";
    import CenterBottom from "./CenterBottom/CenterBottom.svelte";
</script>

<main class="flex flex-col items-center h-full">
    <div class="w-full m-b--1">
        <Header type={HeaderType.home} />
    </div>
    <div class="flex flex-1 gap-5 w-full mb-5 overflow-hidden">
        <div class="ml-5 basis-1/3 h-full">
            <div class="h-1/3">
                <LeftTop />
            </div>
            <div class="h-1/3">
                <LeftMiddle />
            </div>
            <div class="h-1/3">
                <LeftBottom />
            </div>
        </div>
        <div class="basis-1/2">
            <div class="h-1/4">
                <CenterTop />
            </div>
            <div class="h-3/4">
                <CenterBottom />
            </div>
        </div>
        <div class="mr-5 basis-1/3 h-full">
            <div class="h-1/3">
                <RightTop />
            </div>
            <div class="h-1/3">
                <RightMiddle />
            </div>
            <div class="h-1/3">
                <RightBottom />
            </div>
        </div>
    </div>
</main>

<style>
    .m-b--1 {
        /*margin-bottom: -1%;*/
    }
</style>
